<template>
	<div>
		<div>
			<div style="height: 20px;display:flex;align-items: center;">
				<span style="height: 20px;line-height: 20px;font-size: 20px;margin-bottom: 20px;">修改员工信息</span>
			</div>
			<el-form label-position="left" label-width="100px" ref="tableData" :model="tableData">
				<el-form-item label="员工账号">
					<el-input v-model="tableData.staffId"></el-input>
				</el-form-item>
				<el-form-item label="员工姓名">
					<el-input v-model="tableData.staffName"></el-input>
				</el-form-item>
				<el-form-item label="员工头像" label-width="100px">
					<img style="width: 200px; height: 100px" :src="require('@/assets/staffs/'+tableData.imageUrl)" />
				</el-form-item>
				<el-form-item label="上传新图片:" label-width="100px">
					<el-input v-model="tableData.imageUrl" v-if="false"></el-input>
					<el-upload class="upload-demo" ref="upload" drag
						action="http://localhost:8888/images/uploadStaffsImages" multiple :limit="4" :auto-upload="true"
						:on-success="handleAvatarSuccess" list-type="picture">
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">
							将图片拖到此处，或<em>点击上传</em>
						</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="员工性别">
					<el-input v-model="tableData.staffGender"></el-input>
				</el-form-item>
				<el-form-item label="员工手机号">
					<el-input v-model="tableData.staffPhone"></el-input>
				</el-form-item>
				<el-form-item label="员工出生日期">
					<el-col>
						<el-date-picker type="date" placeholder="选择日期" v-model="tableData.staffBirthdate"
							value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="员工入职日期">
					<el-col>
						<el-date-picker type="date" placeholder="选择日期" v-model="tableData.staffCreatetime"
							value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
					</el-col>
				</el-form-item>

			</el-form>
			<el-button type="primary" @click.prevent="submitForm('tableData');updateNotice('tableData')">提交</el-button>
			<el-button @click="resetForm('tableData')">重置</el-button>
			</el-form-item>
		</div>
	</div>
</template>

<script>
	import request from '@/utils/axios/request.js'
	export default {
		data() {
			return {
				tableData: {
					staffId: '',
					staffName: '',
					staffPhone: '',
					staffBirthdate: '',
					staffGender: '',
					imageUrl: '',
					staffCreatetime: ''
				}
			};
		},
		created() {
			// let cookie = document.cookie
			// console.log(cookie)
			let staffId = this.$cookies.get("staffId")
			// console.log($cookies)
			console.log(staffId)
			request({
				method: 'get',
				url: '/staffs/' + staffId,
			}).then((res) => {
				console.log(res)
				if (res.data.code == 100) {
					this.tableData.staffId = res.data.data.staffId
					this.tableData.staffName = res.data.data.staffName
					this.tableData.staffPhone = res.data.data.staffPhone
					this.tableData.imageUrl = res.data.data.imageUrl
					this.tableData.staffBirthdate = res.data.data.staffBirthdate
					this.tableData.staffGender = res.data.data.staffGender
					this.tableData.staffCreatetime = res.data.data.staffCreatetime
				}
				console.log('this.tableData')
				console.log(this.tableData)
			})

		},
		methods: {
			//图片回显
			handleAvatarSuccess(res, file) {
				console.log(res);
				console.log(file)
				this.tableData.imageUrl = res.data;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('请确认提交');
						//console.log(this.tableData)
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			updateNotice: function() {
				// let formData = JSON.stringify(this.tableData)
				console.log(this.tableData)
				request({
					method: 'put',
					url: '/staffs/' + this.tableData.noticeId,
					data: this.tableData
				}).then((res) => {
					// var jsonObj = JSON.parse(JSON.stringify(res.data.data[0]));
					// console.log(this.tableData)
					// console.log("提交成功")
					console.log(res)
					if (res.data.code == 100) {
						alert("更新数据成功")
					}
					if (res.data.code == 101) {
						alert("更新失败")
					}
				})
			}
		}
	}
</script>

<style>
	.el-form-item {
		width: 40%;
		margin-left: 30%;
		margin-right: 30%;
	}
</style>